<template>
    <div ref="el" class="box box-resizable" :style="{ width: resize.width + 'px', height: resize.height + 'px' }">
        <div v-for="item in anchors" :class="`box-resize-${item}`"
        @mousedown="handlemousedown(item, $event)"
        ></div>
    </div>
    <img src="../assets/iconfont.png"class="box box-resizable" :style="{ width: resize.width + 'px', height: resize.height + 'px' }"/>
    <div v-for="item in anchors" :class="`box-resize-${item}`"
        @mousedown="handlemousedown(item, $event)"
        ></div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { useElementBounding, useResizeObserver } from '@vueuse/core'

const el = ref(null)
const { x, y, top, right, bottom, left, width, height }
    = useElementBounding(el)

let resize = reactive({
    width: 100,
    height: 100
})

const direction = 'both'
let currentMoveDirection = ref('')
let anchors = 
    direction === 'h' ? ['left', 'right'] :
    direction === 'v' ? ['top', 'bottom'] :
    direction === 'both' ? ['left', 'right', 'top', 'bottom', 'left-top', 'left-bottom', 'right-top', 'right-bottom'] : []

let pressed = false
const handlemousedown = (item, e) => {
    pressed = true

    currentMoveDirection.value = item
    document.addEventListener('mousemove', handlemousemove)
    document.addEventListener('mouseup', handlemouseup)
}

const handlemousemove = (e) => {
    e.stopPropagation()
    if (!pressed) return
    
    const { clientX, clientY } = e
    switch(currentMoveDirection.value) {
        case 'right-bottom':
            resize.height = clientY
            resize.width = clientX
            break
        case 'bottom':
            resize.height = clientY
            break;
        case 'right':
            resize.width = clientX
            break
    }
}

const handlemouseup = (e) => {
    pressed = false
    document.removeEventListener('mousemove', handlemousemove)
    document.removeEventListener('mouseup', handlemouseup)
}

</script>


<style>
.box {
    text-align: center;
    
    &:hover {
        background-color: #ccc;
        cursor: pointer;
    }
}

.box-resizable {
    position: relative;
}

[class*="box-resize-"] {
    width: 8px;
    height: 8px;
    display: block;
    background-color: aquamarine;
    position: absolute;
    user-select: none;
}

.box-resize-left {
    left: 0;
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    cursor: ew-resize;
}

.box-resize-right {
    right: 0;
    top: 50%;
    transform: translateY(-50%) translateX(4px);
    cursor: ew-resize;
}

.box-resize-top {
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    cursor: ns-resize;
}

.box-resize-bottom {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    cursor: ns-resize;
}

.box-resize-left-top {
    left: 0;
    top: 0;
    transform: translateY(-4px) translateX(-4px);
    cursor: nwse-resize;
}

.box-resize-left-bottom {
    left: 0;
    bottom: 0;
    transform: translateY(4px) translateX(-4px);
    cursor: nesw-resize;
}

.box-resize-right-top {
    right: 0;
    top: 0;
    transform: translateY(-4px) translateX(4px);
    cursor: nesw-resize;
}

.box-resize-right-bottom {
    right: 0;
    bottom: 0;
    transform: translateY(4px) translateX(4px);
    cursor: nwse-resize;
}
</style>
